<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/head.jsp" %>

<!DOCTYPE html>
<html>
	<head>
		<meta name="decorator" content="cms_default_${site.theme}"/>
		<meta charset="utf-8" />
	</head>
	<body class="xwl-pg_index">

			<!-- 轮播图 -->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<c:forEach items="${lstSlide }" var="item" varStatus="status">
						<div class="swiper-slide">
							<a href="${item.ssLink}"><img src="${fn:replace(item.ssPath,'|','')}" /></a>
						</div>
					</c:forEach>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>

				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev swiper-button-black"></div>
				<div class="swiper-button-next swiper-button-black"></div>
			</div>
			<!-- 产品及服务 -->
			<div style="background: #F0EEED;">
				<div class="xwl-Services">
					<div class="xwl-support">
						<p class="xwl-p1">产品及服务</p>
						<p class="xwl-p2">Product and servies</p>
					</div>
					<ul class="solutions-content">
						<c:forEach items="${productLst }" var="item" varStatus="status">
							<li class="Services-li">
								<img src="${fn:replace(item.image,'|','')}" class="solution-circle" />
								<span class="solutions-title">${item.title }</span>
								<p class="solutions-way">${item.description}</p>
								<a href="${ctx }/news/detail/${item.id}.html" class="information">详情信息</a>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
			<!-- 解决方案 -->
			<div class="plan">
				<div class="xwl-support">
					<p class="xwl-p1">解决方案</p>
					<p class="xwl-p2">Solution</p>
				</div>
				<div style="display: flex; justify-content: center;">
					<c:forEach items="${solutionLst }" var="item" varStatus="status">
						<c:if test="${status.index==0}"><div class="xwl-down-left"></c:if>
						<c:if test="${status.index!=0}"><div class="xwl-down-right"></c:if>
							<a href="${ctx }/news/detail/${item.id}.html">
								<div class="down-img">
									<img src="${fn:replace(item.image,'|','')}" />
								</div>
								<p class="down-h3">${item.title }</p>
								<p class="down-p">
										${item.description}
								</p>
							</a>
						</div>
					</c:forEach>
				</div>
				<div class="more">
					<a href="${ctx }/solution.html" >
						<span>查看更多</span>
					</a>
				</div>
			</div>
			<!-- 案例展示 -->
			<div style="background-color: #F0EEED;">
				<div class="Customer">
					<div class="xwl-Customer">
						<p class="p-case">案例展示</p>
						<p class="xwl-p2">Case show</p>
					</div>
					<ul class="Customer-content">
						<c:forEach items="${caseLst }" var="item" varStatus="status">
							<li class="Customer-content-li">
								<a href="${ctx }/news/detail/${item.id}.html">
									<div class="am-gallery-item">
										<img src="${fn:replace(item.image,'|','')}" />
									</div>
									<div class="cover">
										<p class="am-gallery-title">${item.title }</p>
									</div>
								</a>
							</li>
						</c:forEach>
					</ul>
					<div class="more">
						<a href="${ctx }/caseshow.html">
							<span>查看更多</span>
						</a>
					</div>
				</div>
			</div>
			<!-- 新闻动态 -->
			<div class="xwl-dynamic">
				<div class="xwl-Customer">
					<p class="p-case">新闻动态</p>
					<p class="xwl-p2">News and trends</p>
					<p class="xwl-p3"></p>
				</div>
				<div style="display: flex; margin-top: 40px; justify-content: center;">
					<c:forEach items="${xwdtLst }" var="item" varStatus="status">
						<div class="pt_news_slde">
							<div class="dynamic-img">
								<img src="${fn:replace(item.image,'|','')}" />
							</div>
							<h3 class="dynamic-h3" onclick="location.href='${ctx }/news/detail/${item.id}.html'" style="cursor: pointer;">${item.title }</h3>
							<p><fmt:formatDate value="${item.createDate}" pattern="yyyy-MM-dd" /></p>
							<div class="dynamic-word">${item.description}</div>
						</div>
					</c:forEach>

				</div>
				<div class="more02">
					<a href="${ctx }/news.html">
						<span>查看更多</span>
					</a>
				</div>
			</div>
			<!-- 关于我们 -->
			<div class="baiji">
				<div class="Aboutus">
					<div class="xwl-support">
						<p class="Aboutus-p1">关于我们</p>
						<p class="Aboutus-p2">About us</p>
					</div>
					<p style="width: 100%; height: 2px; background: #FFFFFF;"></p>
					<div style="display: flex; margin-top: 50px; position: relative;">
						<div class="xwl-mkokl">
							<img src="${ctxStaticTheme}/img/zhuomian.jpg" />
						</div>
						<div class="Aboutus-word">
							江西海盾信联科技有限责任公司成立于2018年12月，由江西易爱地科技有限责任公司和江西省鄱阳湖生态经济投资有限公司(共青城市人民政府投资平台)合资成立。海盾信联致力于成为领先的全域信息安全可信身份认证、公安物联网服务提供商，是目前数字身份领域目前全国全域应用唯一与公安部第三研究所签约的elD服务机构，并致力于为各类网络应用提供基于
							elD的权威身份认证、数字签名服务，自主可控的核高基01专项的智能高安全芯片、公安物联网综合信息采集平台(海盾卫士)的研发、生产机构，在基于elD的身份认证平台、电子政务、公安物联网和智
							慧城市等方面取得重大突破，处于全国领先地位。发展目标为国际先进、国内领先的一流现代科技企业，未来打造成为江西省本土的高科技独角兽企业，并纳入江西省”映山红行动”。
						</div>
					</div>
				</div>
			</div>
			<!-- 合作伙伴 -->
			<div class="partners">
				<div class="xwl-support">
					<p class="xwl-p1">合作伙伴</p>
					<p class="xwl-p2">Partner</p>
				</div>
				<ul class="partners-ul">
					<c:forEach items="${lstPartnerSlide }" var="item" varStatus="status">
						<li class="partners-li">
							<div class="partners-img">
								<a target="_blank" href="${item.ssLink}"><img src="${fn:replace(item.ssPath,'|','')}" /></a>
							</div>
						</li>
					</c:forEach>
				</ul>
			</div>
			<script src="${ctxStaticTheme}/bootstrap/swiper/js/swiper.min.js"></script>
			<script>
				var mySwiper = new Swiper('.swiper-container', {
				direction: 'horizontal', // 横向切换选项
				loop: true, // 循环模式选项
				autoplay: { //自动切换
				delay: 5000,
				disableOnInteraction: false,
				},
				// 如果需要分页器
				pagination: {
				el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
				}
				})
			</script>

	</body>
</html>
